<template>
  <div class="userCollect"> 
    <n-card class="userCollect-one" hoverable v-for="(item,index) in props.data" :key="index">
      <div class="user-comment-video-left">
        <img class="user-comment-video-img" :src="store.state.baseURL+item.video.img"></img>
        <div class="user-comment-video-about">
          <div class="user-comment-video-about-left">
            <div class="user-comment-video-about-title">{{ item.video.title }}</div>
            <div class="user-comment-video-about-score" >
              <n-rate readonly size="small" :value="Number(item.video.average_score)/2" :allow-half="true" />
              <span class="score_text">{{ item.video.average_score }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="user-comment-video-about-right">
        <div class="user-comment-video-about-count">{{ takeTime(item.created_at) }}收藏</div>
        <div class="user-comment-video-goto" @click="goto(item.video.id)">跳转>></div>
      </div>
    </n-card>
  </div>
</template>

<script setup>
import { NRate ,NCard,NButton} from 'naive-ui'
import { defineProps ,ref} from "vue";
import { useStore } from "vuex";
import { takeTime } from '@/utils/base';
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})
const goto=(id)=>{
  router.push(`/detail/${id}`)
}
</script>

<style lang="scss" scoped>
@import '@/styles/base.scss';
.userCollect{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  
  .userCollect-one{
    margin-bottom: 20px;
    padding: 10px;
    ::v-deep .n-card__content{
      display: flex !important;
      justify-content: sppace-between;
      align-content: center;
    } 
    .user-comment-video-left{
      display: flex;
      flex:1;
      align-items: center;
      .user-comment-video-img{
        width: 80px;
        border-radius: 5px;
        margin-right: 10px;
      }
      .user-comment-video-about{
        display: flex;
        flex: 1;
        align-items: baseline;
        justify-content: space-between;
        
        .user-comment-video-about-title{
          font-size: 1.5rem;
          font-weight: bold;
          color: #333;
        }
        .user-comment-video-about-score{
          font-size: 0.9rem;
          color: #999;
        }
        .user-comment-video-about-count{
          font-size: 0.9rem;
          color: #999;
        }
      }
      
    }
    .user-comment-video-about-right{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      .user-comment-video-goto{
        font-weight: bold;
        cursor: pointer;
        &:hover{
          color: $baseColor;
        }
      }
    }
  }
}
</style>
